<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div class="pie" ref="pie"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div class="line" ref="line"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="always" style="margin: 20px 0px">
      <div class="bar" ref="bar"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Dashboard",
  mounted() {
    this.setPie();
    this.setLine();
    this.setBar();
  },
  methods: {
    // 饼图
    setPie() {
      // 初始化
      var myChart = echarts.init(this.$refs.pie);
      // 配置项
      let option = {
        // 显示提示框
        tooltip: {
          trigger: "item",
        },
        // 图例
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "center",
            },
            labelLine: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "38",
                fontWeight: "bold",
              },
            },

            data: [
              { value: 1048, name: "西瓜" },
              { value: 735, name: "南瓜" },
              { value: 580, name: "黄瓜" },
              { value: 484, name: "哈密瓜" },
              { value: 300, name: "甜瓜" },
            ],
          },
        ],
      };
      // 设置配置项
      myChart.setOption(option);
    },
    // 线形图
    setLine() {
      // 初始化
      var myChart = echarts.init(this.$refs.line);
      // 配置项
      let option = {
        xAxis: {
          type: "category",
          data: [
            "芒果",
            "苹果",
            "火龙果",
            "樱桃",
            "香蕉",
            "橙子",
            "柚子",
            "榴莲",
            "草莓",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 1300, 901, 1430, 300, 1330, 880, 1830, 180],
            type: "line",
            smooth: true,
            itemStyle: {
              color: "red",
            },
          },
        ],
      };
      //设置配置项
      myChart.setOption(option);
    },
    // 柱状图
    setBar() {
      // 初始化
      var myChart = echarts.init(this.$refs.bar);
      // 配置项
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["华为", "OPPO", "VIVO", "三星", "苹果", "小米", "诺基亚"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "50%",
            data: [88, 480, 180, 280, 388, 78, 98],
            color: "green",
          },
        ],
      };

      // 设置配置项
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.pie {
  width: 100%;
  height: 400px;
}
.line {
  width: 100%;
  height: 400px;
}
.bar {
  height: 400px;
}
</style>
